<template>
  <div>
    <van-popup v-model:show="awardShow">
      <div class="main">
        <div class="title">恭喜您获得以下奖励</div>
        <div v-if="props.list.length < 2" class="one">
          <div class="pic-box">
            <img :src="props.list[0].picture" alt="" />
            <div class="tag">{{ props.list[0].count }}天</div>
          </div>
          <div class="name">{{ props.list[0].title }}</div>
        </div>
        <div v-else class="all">
          <div v-for="(item, i) in props.list" :key="i" class="gift-list">
            <div class="icon-box">
              <img :src="item.picture" alt="" />
              <div class="tag">{{ `${item.count}天` }}</div>
            </div>
            <div class="name">{{ item.title }}</div>
          </div>
        </div>
        <div class="ok" @click="onClose"></div>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import { computed } from 'vue'
const props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  list: {
    type: Array,
    default: () => [],
  },
})
const awardShow = computed(() => {
  return props.show
})

const emit = defineEmits(['close'])
// 弹窗关闭
const onClose = () => {
  emit('close')
}
</script>
<style lang="scss" scoped>
@import './style.scss';
</style>
